<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理</title>

<script type="text/javascript" src="../js/jquery-3.4.1/jquery-3.4.1.js"></script>
<script type="text/javascript" src="../js/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../js/bootstrap-4.4.1-dist/css/bootstrap.min.css">

<style type="text/css">
.card {
	width: 95%;
	margin: 0 auto;
}

.card-body-top {
	margin-top: -10px;
	margin-bottom: 5px;
}
</style>

<script type="text/javascript">
	$(function() {
		$("#customCheck").click(function() {
			if ($(this).prop("checked") == true) {
				$("input[name='customUserCheck']").each(function() {
					$(this).prop("checked", true);
				});
			} else {
				$("input[name='customUserCheck']").each(function() {
					$(this).prop("checked", false);
				});
			}
		});
		$("input[name='customUserCheck']").each(function() {
			$(this).click(function() {
				$("#customCheck").prop("checked", false);
			});
		});
		$(".tr-body").each(function() {
			$(this).click(function() {
				var check = $(this).find("input[name='customUserCheck']").prop("checked");
				$(this).find("input[name='customUserCheck']").prop("checked", !check);
				$("#customCheck").prop("checked", false);
			});
		});

	});
</script>

</head>
<body>
	<div class="card shadow">
		<div class="card-body">
			<div class="card-body-top">
				<button type="button" class="btn btn-primary" onclick="manageUser(1)">启用</button>
				<button type="button" class="btn btn-danger" onclick="manageUser(2)">禁用</button>
				<button type="button" class="btn btn-warning text-white" onclick="manageUser(3)">修改</button>
			</div>
			<table class="table text-center table-hover">
				<thead>
					<tr>
						<th>
							<div class="custom-control custom-checkbox">
								<input type="checkbox" class="custom-control-input" id="customCheck" name="customCheck">
								<label class="custom-control-label" for="customCheck">全选</label>
							</div>
						</th>
						<th>账号</th>
						<th>手机号</th>
						<th>状态</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${userList }" var="user">
						<tr class="tr-body">
							<td>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" name="customUserCheck"
										id="${user.userId }" value="${user.userId }">
									<label class="custom-control-label" for="${user.userId }"></label>
								</div>
							</td>
							<td>${user.userAccount }</td>
							<td>${user.userPhone }</td>
							<td>${user.userStatus.statusTypeName }</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</div>
	<c:if test="${msg!=null}">
		<script type="text/javascript">
			alert("${msg}");
		</script>
	</c:if>
</body>

<script type="text/javascript">
	function manageUser(choose) {
		var userIdArr = [];
		$("input[name='customUserCheck']").each(function() {
			if ($(this).prop("checked") == true) {
				userIdArr.push($(this).val());
			}
		});
		if (userIdArr.length <= 0) {
			alert("请至少选择一个用户！");
			return;
		}
		if (choose == 1) {
			location.href = "updateUserStatus.do?userId=" + userIdArr + "&userStatusId=1";
		} else if (choose == 2) {
			location.href = "updateUserStatus.do?userId=" + userIdArr + "&userStatusId=2";
		} else if (choose == 3) {
			if (userIdArr.length >= 2) {
				alert("最多只能选择一个用户！");
				return;
			}
			location.href = "toUpdateUserInfoJsp.do?userId=" + userIdArr[0];
		}

	}
</script>
</html>